<template>
  <div class="charts" ref="charts"></div>
</template>

<script>
  import * as echarts from 'echarts';
  import {mapGetters} from 'vuex'

  export default {
    components: {},
    data() {
      return {

      };
    },
    computed: {
      ...mapGetters([
        'chartData'
      ]),
    },
    watch: {
    	chartData(newValue, oldValue) {
        this.initData()
    	}
    },
    mounted() {
      this.initChart();
    },
    methods: {
      initData() {
        this.$nextTick(() => {
          this.initChart();
        })
      },
      initChart() {
        let data = this.chartData.payTrend
        let barCharts = echarts.init(this.$refs.charts)
        let option = {
          tooltip: {},
          xAxis: {
            show: false,
            type: 'category'
          },
          yAxis: {
            show: false
          },
          series: [{
            name: 'Fake Data',
            type: 'bar',
            data: data,
          }],
          grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0
          }
        };
        barCharts.setOption(option)
      }
    }
  }
</script>
<style lang='less' scoped>
  .charts {
    width: 100%;
    height: 100%;
  }
</style>
